<script setup>
/**
 * 登录注册按钮
 */
import { MeModal } from '@/components'
import { useForm, useModal } from '@/composables'
import { login } from '@/store/helper.js'

const [modalRef, okLoading] = useModal()
const [loginFormRef, loginForm, loginFormValidation, commonRules] = useForm({
  username: 'dtxg',
  password: '123456',
})

async function loginTo() {
  await loginFormValidation()
  okLoading.value = true
  try {
    await login(loginForm.value)
    modalRef.value?.close()
  }
  catch (error) {
    console.error(error)
    okLoading.value = false
  }
}
</script>

<template>
  <el-button type="primary" @click="modalRef.open()">
    登录 <span class="mx-4 op-30">|</span> 注册
  </el-button>
  <MeModal ref="modalRef" width="350px" :modal-style="{ padding: '14px 16px' }">
    <template #header>
      <div class="flex items-center justify-between px-10 p-t-10">
        <div class="font-size-24 font-semibold">
          登录
        </div>
        <i
          class="close-icon i-fe:x cursor-pointer font-size-24 hover:bg-primary"
          @click="modalRef.close"
        />
      </div>
    </template>
    <el-form ref="loginFormRef" :model="loginForm" :closable="false">
      <el-form-item prop="username" :rules="commonRules.required">
        <el-input
          v-model="loginForm.username"
          size="large"
          placeholder="请输入邮箱/手机号"
        >
          <template #prefix>
            <i class="i-fe:user mr-12" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item :rules="commonRules.required" prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          size="large"
          placeholder="请输入密码"
          show-password
        >
          <template #prefix>
            <i class="i-fe:lock mr-12" />
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        size="large"
        class="w-full"
        :loading="okLoading"
        @click="loginTo"
      >
        登录
      </el-button>
      <div class="mt-12 font-size-12 c-#8A919F">
        注册登录即表示同意
        <el-link :underline="false" type="primary">
          用户协议
        </el-link>
        和
        <el-link :underline="false" type="primary">
          隐私政策
        </el-link>
      </div>
    </template>
  </MeModal>
</template>

<style scoped></style>
